<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人博客 - 首页</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- 导航栏 -->
  <header class="navbar">
    <div class="nav-container">
      <h1 class="site-title">我的技术博客</h1>
      <nav class="nav-links">
        <a href="index.html" class="nav-link">首页</a>
        <a href="blog.html" class="nav-link">文章</a>
        <a href="about.html" class="nav-link">关于我</a>
      </nav>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="container home-container">
    <!-- 最新文章区 -->
    <section>
      <h2 class="mb-3">最新文章</h2>
      
      <article class="article-card">
        <h3 class="article-title">深入理解CSS Grid布局</h3>
        <div class="article-meta">发布于 2023年10月15日 · 阅读时间 8分钟</div>
        <p>探索CSS Grid的强大功能，学习如何创建复杂的响应式布局...</p>
        <a href="#" class="btn">阅读全文</a>
      </article>

      <article class="article-card">
        <h3 class="article-title">JavaScript闭包实践指南</h3>
        <div class="article-meta">发布于 2023年10月10日 · 阅读时间 6分钟</div>
        <p>通过实际案例解析闭包原理及其在现代JS开发中的应用场景...</p>
        <a href="#" class="btn">阅读全文</a>
      </article>
    </section>

    <!-- 侧边栏个人简介 -->
    <aside>
      <div class="article-card">
        <h3 class="text-center">关于作者</h3>
        <p>前端开发工程师，5年经验，专注于构建高性能、用户友好的web应用...</p>
        <a href="about.html" class="btn">了解更多</a>
      </div>
    </aside>
  </main>

  <!-- 页脚 -->
  <footer class="text-center mb-3">
    <p>© 2023 我的技术博客 | 保留所有权利</p>
  </footer>
</body>
</html>